<template>
  <div id="app">
    <cube-button @click="handleClick">按钮</cube-button>
    <cube-date-picker
      :visible="isVisible"
      title="时间设置"
      :value="new Date()"
      startColumn="hour"
      :columnCount="2"
      :onSelect="selectHandleDate"
    ></cube-date-picker>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return {
      isVisible: false
    }
  },
  methods: {
    handleClick () {
      this.$createToast({
        txt: '正在处理',
        type: 'loading'
      }).show();
      this.isVisible = true
    },

    handleClick1 () {
      if (!this.dataPicker) {
        this.dataPicker = this.$createDatePicker({
          title: '时间设置',
          value: new Date(),
          // min: new Date('2020-01-01 00:00:00'),
          // max: new Date('2020-05-29 23:59:59'),
          startColumn: 'hour',
          columnCount: 2,
          onSelect: this.selectHandleDate
        })
      }
      this.dataPicker.show()
    },

    selectHandleDate(date) {
      console.log(date)
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
